<template>
  <section class="orgmain">
    <el-row class="org_main">
      <el-col :span="5">
        <div class="search_inp">
          <el-input @input="searchGroup" v-model="searchName" clearable placeholder="请输入内容" prefix-icon="el-icon-search">
          </el-input>
        </div>
        <el-row>
          <el-col :span="12">
            <div class="menu" :class="{ menu_active: $route.name == 'group' }" @click="routerLink(0)">
              <el-button type="text" class="menu_btn">组织架构</el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="menu" :class="{ menu_active: $route.name == 'organize' }" @click="routerLink(1)">
              <el-button type="text" class="menu_btn">小组</el-button>
            </div>
          </el-col>
        </el-row>
        <section class="menu_tree" v-if="$route.name == 'organize' && searchName == ''">
          <el-tree :data="menuDeptList" node-key="id" default-expand-all :expand-on-click-node="false">
            <span slot-scope="{ node, data }" @click="findDeptUserList(data)">
              <i class="iconfont ali-wenjianjia1"></i>
              <span>{{ node.label }}</span>
              <!-- <span>(20人)</span> -->
            </span>
          </el-tree>
        </section>
        <section class="menu_group" v-if="$route.name == 'group' && searchName == ''">
          <ul>
            <li v-for="group in menuGroupList" :key="group.id">
              <i class="iconfont ali-wenjianjia1"></i>
              <el-button type="text" @click="findGroupUserList(group)">
                <span>{{group.group_name}}</span>
              </el-button>
              <span>({{group.user_num}}人)</span>
            </li>
          </ul>
        </section>
        <!-- 搜索栏实例 -->
        <section class="menu_group" v-if="$route.name == 'organize' && searchName">
          <ul>
            <li v-for="(item, key) in searchData" :key="key">
              <span v-if="item.type == 'dept'">
                <i class="iconfont ali-wenjianjia1"></i>
                <el-button type="text" @click="findDeptById(item)">
                  <span>{{item.name}}</span>
                </el-button>
              </span>
              <span v-else>
                <i class="iconfont ali-username"></i>
                <el-button type="text" @click="findUserById(item)">
                  <span>{{item.name}}</span>
                </el-button>
              </span>
            </li>
          </ul>
        </section>
        <section class="menu_group" v-if="$route.name == 'group' && searchName">
          <ul>
            <li v-for="(item, key) in searchData" :key="key">
              <span>
                <i class="iconfont ali-wenjianjia1"></i>
                <el-button type="text" @click="findGroupById(item)">
                  <span>{{item.name}}</span>
                </el-button>
              </span>
            </li>
          </ul>
        </section>
      </el-col>
      <el-col :span="19" v-loading="loading">
        <router-view></router-view>
      </el-col>
    </el-row>
    <user-org-dialog ref="userOrg" :loading.sync="loading"></user-org-dialog>
  </section>
</template>
<script>
import { company_findById, dept_findById, group_findById } from '@/api/group'
import { user_searchMail, user_findById, user_searchGroup } from '@/api/user'
import { mapGetters } from 'vuex'
import userOrgDialog from './components/user_org_dialog'

export default {
  name: "orgmain",
  components: {userOrgDialog},
  data() {
    return {
      companyId: localStorage.getItem("companyId"),
      loading: false,
      searchName: '',
      searchData: []
    };
  },
  computed: {
    ...mapGetters([
      'menuDeptList',
      'menuGroupList'
    ])
  },
  methods: {
    async searchGroup(val) {
      this.searchData = [];
      if (val && this.$route.name == 'organize') {
        const params = {company_id: localStorage.getItem("companyId"), search_name: val}
        const { data } = await user_searchMail(params);
        if(data.status === 100 && data.data.rows.length > 0){
          this.searchData = data.data.rows;
        }
        this.searchName = val;
      } else if(val && this.$route.name == 'group'){
        const params = {company_id: localStorage.getItem("companyId"), search_name: val}
        const { data } = await user_searchGroup(params);
        if(data.status === 100 && data.data.rows.length > 0){
          this.searchData = data.data.rows.map( item => {
            if(item.type != 'user') return item;
          });
        }
        this.searchName = val;
      } else {
        this.searchName = '';
      }
    },
    async findDeptById(dept){
      const {data} = await dept_findById({id: dept.id});
      if(data.status === 100){
        this.findDeptUserList(data.data);
      }
    },
    async findGroupById(group){
      let {data} = await group_findById({id: group.id});
      if(data.status === 100){
        await this.findGroupUserList(data.data);
      }
    },
    async findUserById(user){
      this.loading = true;
      await this.$refs.userOrg.initField();
      let {data} = await user_findById({id: user.id});
      if(data.status === 100){
        await this.$refs.userOrg.openPerson(data.data);
        this.loading = false;
      }
    },
    routerLink(e) {
      this.searchGroup();
      if (e === 0) {
        this.$router.push("/orgmain/organize");
      } else {
        this.$router.push("/orgmain/group");
      }
    },
    initList() {
      if (!this.companyId) {
        this.$message.warning('公司信息获取异常');
        return;
      }
      this.haveGroupList();
      this.haveDeptList();
      this.haveCompany(this.companyId);
    },
    async haveGroupList() {//根据公司id获取小组列表
      let result = await this.$store.dispatch('SetGroupList');
      this.findGroupUserList(result[0]);
    },
    async haveDeptList() {//根据公司id获取部门列表
      let dept = await this.$store.dispatch("SetDeptList");
      this.findDeptUserList(dept[0]);
      this.$store.dispatch("SetCacheDept", dept[0]);//设置当前选中部门的详情 包含子集
    },
    async findGroupUserList(group) {//获取当前小组id下面的人员列表
      this.loading = true;
      await this.$store.dispatch('FindUsersByGroupId', group);
      this.loading = false;
    },
    async findDeptUserList(dept) {//获取当前部门id下面的人员列表
      this.loading = true;
      await this.$store.dispatch('FineUsersByDeptId', dept.id);
      await this.$store.dispatch("SetCacheDept", dept);//设置当前选中部门的详情 包含子集
      this.loading = false;
    },
    async haveCompany(id) {//根据公司id获取公司信息
      let { data } = await company_findById({ id: id })
      if (data.status == 100) {
        this.$store.dispatch("SetCompanyName", data.data.company_name)
      }
    }
  },
  created() {
    this.initList();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.org_main {
  padding: 0 20px;
  .search_inp {
    margin-top: 15px;
    padding: 10px 0;
  }
  .menu {
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    font-size: 1.2rem;
    background-color: #fff;
    .menu_btn {
      color: #01a0ef;
    }
  }
  .menu_active {
    .menu_btn {
      color: #3a3a3a;
    }
    border: 1px solid #e5e5e5;
  }
  .ali-wenjianjia1 {
    color: #b8e8ff;
  }
  .ali-username{
    color: #b8e8ff;
    font-size: 15px;
  }
  .menu_tree {
    overflow: hidden;
    span {
      font-size: 13px;
    }
  }
  .menu_group {
    overflow: hidden;
    background-color: #fff;
    padding: 15px;
    span {
      color: #585858;
      font-size: 13px;
    }
  }
}
</style>
